<template>
    <div>
        <ListTable v-for="(item, index) in officalListDetail" :key="index" :officalListDetailItem="item" @dblclick="dblclick"></ListTable>
        <div class="global">
            <ListCard :listCardItem="globalList" @click-list-card-item="clickListCardItem"></ListCard>
        </div>
    </div>
</template>

<script setup>
import ListTable from '../../components/ListTable.vue'
import ListCard from '../../components/ListCard.vue'
import { ref, onBeforeMount } from 'vue'
import request from '../../api/index'
import { handleMusicTime } from "../../utils/utils";
import { useRouter } from 'vue-router';
import useStore from '../../store/idnex';
const store = useStore()
const router = useRouter()

//优先展示的四个排行榜
const officalList = ref([])
// 四个优先展示排行榜的具体数据
const officalListDetail = ref([])
// 除四个排行榜之外的
const globalList = ref([])


// 请求所有榜单，这里面是没有歌单的歌曲数据的，需要通过getMusicListDetail根据id获得具体数据
const getAllRankings = async () => {
    let res = await request('/toplist')
    // console.log(res);
    // 取前四条数据
    officalList.value = res.data.list.slice(0, 4)
    globalList.value = res.data.list.slice(4)
}

//根据榜单传来的id查询歌单
const getMusicListDetail = async (id) => {
    let res = await request('/playlist/detail',{id})
    // console.log(res);
    // 对时间处理
    res = res.data.playlist
    res.tracks.forEach((item, index) => {
        res.tracks[index].dt = handleMusicTime(null, item.dt)
    })
    officalListDetail.value.push(res)
}

onBeforeMount(async () => {
    // 等到请求完
    await getAllRankings()
    //  根据id请求具体的数据
    officalList.value.forEach(item => {
        getMusicListDetail(item.id)
    })
})

// 表格双击事件触发，更新store中的MusicId
const dblclick = (id) => {
    store.updateMusicId(id)
}

// 卡片单击触发，路由到musicListDetail页面
const clickListCardItem = (id) => {
    router.push({ name:'musicListDetail',params:{id:id}})
}




</script>

<style lang="scss" scoped>

</style>